// API callback
relatedResultsLabels({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739"},"updated":{"$t":"2025-02-16T20:23:55.958+07:00"},"category":[{"term":"Tutorial Blog"},{"term":"Widget"},{"term":"General"},{"term":"Smartphone"},{"term":"Android"},{"term":"Tips Komputer"},{"term":"App Mobile"},{"term":"Tips SEO"},{"term":"Tips Youtube"},{"term":"Kesehatan dan Lifestyle"},{"term":"Tips Adsense"},{"term":"Tips Facebook"},{"term":"Full Review"},{"term":"Blogger Template Free"},{"term":"Blogger Templates"},{"term":"Free Blogger Template Responsive"},{"term":"Templates"},{"term":"Tips Bisnis"},{"term":"Review"},{"term":"Bisnis Online"},{"term":"Blog Tips"},{"term":"Pilih HP"},{"term":"Hosting dan Domain"},{"term":"Blogger v3"},{"term":"Samsung"},{"term":"Bitcoin"},{"term":"Tips Windows"},{"term":"Cryptocurrency"},{"term":"糖心vlog官方入口"},{"term":"Xiaomi"},{"term":"AMP 糖心vlog官方入口"},{"term":"Disqus"},{"term":"CSS"},{"term":"JavaScript"},{"term":"Sastra"},{"term":"Google Search Console"},{"term":"Google Webmaster"},{"term":"Trik Blogger"},{"term":"Tutorial Singkat"},{"term":"Premium Template"},{"term":"Asus"},{"term":"iPhone"},{"term":"Breadcrumbs"},{"term":"Conditional Tags"},{"term":"Daftar Isi"},{"term":"Tips Blogger"},{"term":"BlogPosting"},{"term":"CloudFlare"},{"term":"Domain .co.vu"},{"term":"Forum"},{"term":"Hostinger"},{"term":"Hotel Mewah di Jakarta"},{"term":"Infinite Scroll"},{"term":"Jooble"},{"term":"Jooble Indonesia"},{"term":"Linguistik"},{"term":"Load More"},{"term":"Meta Data"},{"term":"Meta Data Keywords"},{"term":"Property Article Tag"},{"term":"Schema Markup"},{"term":"Service"},{"term":"Software"},{"term":"Tips Website"},{"term":"Traveloka"}],"title":{"type":"text","$t":"Blog bungfrangki"},"subtitle":{"type":"html","$t":"Blog bungfrangki berbagai panduan tips \u0026amp; tutorial Blogger untuk pemula, seperti template Blogspot, optimasi SEO, Tools, 糖心vlog官方入口, CSS, JavaScript, lainnya"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/-\/Tutorial+Blog?alt=json-in-script\u0026max-results=10"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/search\/label\/Tutorial%20Blog"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/-\/Tutorial+Blog\/-\/Tutorial+Blog?alt=json-in-script\u0026start-index=11\u0026max-results=10"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"244"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"10"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-8271025736834010656"},"published":{"$t":"2024-08-27T21:49:00.005+07:00"},"updated":{"$t":"2024-08-28T07:39:55.170+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tips Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":"Menampilkan Komentar Gambar di Blogger dengan JavaScript"},"content":{"type":"html","$t":"\u003Cp\u003EUntuk menampilkan komentar berisi link gambar di Blogger dapat dilakukan dengan manipulasi element di JavaScipt (tanpa jQuery). Kurang lebih penampakannya seperti pada thumbnail\/hero postingan ini.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiTy44oZGNBAjzg3AwK8YwyglwDb4qbI1Ev7mg8kFQPa-XtYVkSOF4Au9tcJJsCDpMBnhQSovvsd8A_xypfaM_r2Cktcuh9FsiU3zkYI7ToVY0iLwXvjEy_e5fPkJLdpMP9HUkeFeB_BlmmAF__skczgcK_7IfwfAZXcrog2Q46qxqRAbegYmxxGCAMkCto\/s1920\/komentar-berisi-link.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Menampilkan Komentar Gambar di Blogger dengan JavaScript\" border=\"0\" data-original-height=\"1080\" data-original-width=\"1920\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiTy44oZGNBAjzg3AwK8YwyglwDb4qbI1Ev7mg8kFQPa-XtYVkSOF4Au9tcJJsCDpMBnhQSovvsd8A_xypfaM_r2Cktcuh9FsiU3zkYI7ToVY0iLwXvjEy_e5fPkJLdpMP9HUkeFeB_BlmmAF__skczgcK_7IfwfAZXcrog2Q46qxqRAbegYmxxGCAMkCto\/s16000\/komentar-berisi-link.jpg\" title=\"Menampilkan Komentar Gambar di Blogger dengan JavaScript\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cp\u003EHari ini saya cukup kaget setelah mendapat balasan komentar dari salah satu Blogger sepuh di Indonesia. \u003Ca href=\"https:\/\/www.kang-ismet.com\/\" target=\"_blank\"\u003EKang Ismet\u003C\/a\u003E. Bahwa ternyata tampilan logo di footer agak berantakan di browser atau device lain.\u003C\/p\u003E\u003Cp\u003ENamun, yang ternyata lebih mengganggu pikiran saya adalah, isi komentar berupa link gambar yang panjang itu.\u0026nbsp;\u003C\/p\u003E\u003Cp\u003ESedikit merepotkan untuk sekadar mendapatkan informasi dari sebuah gambar. Saya harus copy terlebih dahulu url gambar tersebut. Adapun sebelum tahapan meng-\u003Ci\u003Ecopy \u003C\/i\u003Elink gambar itu, terdapat aktifitas yang disebut dengan menyeleksi teks. Bila beruntung, saya dapat menyeleksinya dengan sekali geseran mouse. Dari awal huruf \u003Ci\u003Elink \u003C\/i\u003Esampai akhir, dengan penuh kewaspadaan. Terus mem-\u003Ci\u003Epaste\u003C\/i\u003E-nya ke tab baru di browser.\u003C\/p\u003E\u003Cp\u003EUntungnya link gambar yang dibagikan hanya satu saja. Coba bayangkan bila link gambarnya banyak, dengan panjang linknya yang bukan maen seperti itu. Tentu akan makin merepotkan.\u003C\/p\u003E\u003Cp\u003EUntuk itulah saya lakukan sedikit modifikasi lagi pada fitur komentar di blog ini. Dengan menambahkan \"\u003Cb\u003Ebutton\u003C\/b\u003E\" yang dengan hanya diklik, maka dia akan menampilkan link gambar pada komentar. Tanpa perlu \u003Ci\u003Ecopy-paste\u003C\/i\u003E link dan keluar dari halaman blog untuk membuka tab baru di browser.\u003C\/p\u003E\u003Cp\u003EUntuk demonya, bisa cek langsung di komentar postingan ini: \u003Ca href=\"https:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-url-contains.html\"\u003Ehttps:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-url-contains.html\u003C\/a\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Menampilkan Komentar Berisi Link Gambar di Blogspot dengan JavaScript\u003C\/h2\u003E\u003Ch3 style=\"text-align: left;\"\u003ECara 1 (tanpa tombol, gambar langsung tampil)\u0026nbsp;\u003C\/h3\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cp\u003Econst imgElements = document.querySelectorAll('i[rel=\"img\"],i[rel=\"image\"]');\u003C\/p\u003E\u003Cp\u003EimgElements.forEach((element) =\u0026gt; {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; const imgUrl = element.textContent;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; const imgTag = document.createElement('img');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; imgTag.src = imgUrl;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; element.inner糖心vlog官方入口 = '';\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; element.appendChild(imgTag);\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; element.setAttribute('alt', '');\u003C\/p\u003E\u003Cp\u003E});\u003C\/p\u003E\u003C\/blockquote\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003ECara 2 (pakai tombol)\u003C\/h3\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cp\u003Econst imgElements = document.querySelectorAll('i[rel=\"img\"],i[rel=\"image\"]\u003C\/p\u003E\u003Cp\u003E');\u003C\/p\u003E\u003Cp\u003EimgElements.forEach((element) =\u0026gt; {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; const button = document.createElement('button');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; button.textContent = 'Show Image';\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; button.classList.add('ShowImageComment');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; element.appendChild(button);\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; button.addEventListener('click', () =\u0026gt; {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; const imgUrl = element.textContent;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; const imgTag = document.createElement('img');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; imgTag.src = imgUrl;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; element.inner糖心vlog官方入口 = '';\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; element.appendChild(imgTag);\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; element.style.display = 'block';\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; imgTag.setAttribute('alt', '');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; });\u003C\/p\u003E\u003Cp\u003E});\u003C\/p\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003ECatatan:\u003C\/b\u003E\u003Cbr \/\u003E\n  Agar script ini bisa berhasil, pastikan \u003Ccode\u003Edocument.querySelectorAll\u003C\/code\u003E sudah di sesuaikan di blog masing-masing. Pada tutorial ini, \u003Ccode\u003Edocument.querySelectorAll\u003C\/code\u003E yang digunakan adalah \u003Ccode\u003Ei[rel=\"img\"]\u003C\/code\u003E dan \u003Ccode\u003Ei[rel=\"image\"]\u003C\/code\u003E\n\u003C\/div\u003E\n\u003Cbr \/\u003E\u003Cp\u003EDemikian, semoga bermanfaat.\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/8271025736834010656\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/08\/menampilkan-komentar-gambar-di-blogger.html#comment-form","title":"15 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8271025736834010656"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8271025736834010656"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/08\/menampilkan-komentar-gambar-di-blogger.html","title":"Menampilkan Komentar Gambar di Blogger dengan JavaScript"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiTy44oZGNBAjzg3AwK8YwyglwDb4qbI1Ev7mg8kFQPa-XtYVkSOF4Au9tcJJsCDpMBnhQSovvsd8A_xypfaM_r2Cktcuh9FsiU3zkYI7ToVY0iLwXvjEy_e5fPkJLdpMP9HUkeFeB_BlmmAF__skczgcK_7IfwfAZXcrog2Q46qxqRAbegYmxxGCAMkCto\/s72-c\/komentar-berisi-link.jpg","height":"72","width":"72"},"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-8573637192448471847"},"published":{"$t":"2024-07-21T09:39:00.002+07:00"},"updated":{"$t":"2024-07-21T09:49:27.124+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Conditional Tags"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Singkat"}],"title":{"type":"text","$t":"Blogger Conditional Tags URL Contains"},"content":{"type":"html","$t":"\u003Cp\u003E\u0026nbsp;Melanjutkan tutorial singkat kemari tentang\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-pageid-postid.html\"\u003EBlogger Conditional Tags dengan data:view.pageId dan data:view.postId\u003C\/a\u003E. Kali ini akan dibahas Blogger conditional tags lainnya, yang sedikit lebih kompleks dan teknis.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Blogger Conditional Tags URL Contains\" border=\"0\" data-original-height=\"800\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgivAvKMOCv9Swef7W_CmZsPhX_rpUExLw48n2ZwWQ4miutd2gQdides7D7ZzTchY0VBaPiKSE-kx9VjYdSD1fvd-y2nGNbjGUcJ3NErEOlFSlxFu37xMh1f2oZE5AEpkwNBOqgtr_tGV_17dJB5lscQS8nJFQwcilluZSOTrfB_pW0o3ARNYQTVmes2Dcz\/s16000\/blogger-conditional-tags-url-contains.jpg\" title=\"Blogger Conditional Tags URL Contains\" \/\u003E\u003C\/div\u003E\u003Cp\u003EBlogger conditional tags dengan operator URL contains ini memungkinkan Anda untuk membuat kondisi pada semua URL di blog yang mengandung sebagian atau seluruh dari\u0026nbsp;\u003Ci\u003Eslug\u003C\/i\u003E tertentu, yang dituliskan sebagai \u003Ci\u003Estring\u003C\/i\u003E.\u003C\/p\u003E\u003Cp\u003EMenariknya, semua URL blog yang dimaksud adalah meliputi URL di Page (halaman static), Post (postingan), label, search, archive dan lainnya.\u003C\/p\u003E\u003Ch2\u003EPenerapan\u003C\/h2\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp; \u0026lt;b:with value='data:view.url.canonical' var='url'\u0026gt; \u0026nbsp; \u003Cp\u003E\u0026lt;b:if cond='or(contains(data:url, \"tutorial-blog\"), contains(data:url, \"\/p\/contact\"), contains(data:url, \"2024\/07\/cara-\"), contains(data:url, \"\/search\/label\/Templates\"), contains(data:url, \"naruto atau boruto\"))'\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026lt;!-- your code or content here --\u0026gt; \u003C\/p\u003E\u003Cp\u003E\u0026nbsp;\u0026lt;\/b:if\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;\/b:with\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch2\u003EAlternatif\u003C\/h2\u003E\u003Cp\u003EBila tidak berhasil dengan cara di atas, silahkan ganti kode pada \u003Ccode\u003Evalue\u003C\/code\u003E dengan kode berikut ini:\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003Edata:view.url.canonical.https\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cp\u003EDemikian, semoga berhasil!\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/8573637192448471847\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-url-contains.html#comment-form","title":"6 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8573637192448471847"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8573637192448471847"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-url-contains.html","title":"Blogger Conditional Tags URL Contains"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgivAvKMOCv9Swef7W_CmZsPhX_rpUExLw48n2ZwWQ4miutd2gQdides7D7ZzTchY0VBaPiKSE-kx9VjYdSD1fvd-y2nGNbjGUcJ3NErEOlFSlxFu37xMh1f2oZE5AEpkwNBOqgtr_tGV_17dJB5lscQS8nJFQwcilluZSOTrfB_pW0o3ARNYQTVmes2Dcz\/s72-c\/blogger-conditional-tags-url-contains.jpg","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-7323203411485588145"},"published":{"$t":"2024-07-19T08:39:00.004+07:00"},"updated":{"$t":"2024-07-22T08:59:55.438+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Conditional Tags"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Singkat"}],"title":{"type":"text","$t":"Blogger Conditional Tags dengan data:view.pageId dan data:view.postId"},"content":{"type":"html","$t":"\u003Cp\u003E\u0026nbsp;Bagi yang masih kesulitan dalam penerapan tag kondisional untuk page dan post tertentu yang tidak bekerja atau mengalami error, bisa mencoba cara ini.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Blogger Conditional Tags dengan data:view.pageId dan data:view.postId\" border=\"0\" data-original-height=\"800\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiaNUU9I8CHlgLdHcr2KwQEPsVnbKUWuy6KEpuBd0XeRlOY1EFxg0f1WHJ13f24LxnNKByCkqVHFWk-xXloIyoTCE0gKI-m8YKDp8h9Pdr5crSNARg4H2VqKs82BZ0paQL2CiWGHbo3QVAX3F5JZYnZ7rZj_2jzbblurqT1y4uqUV5i-U-xlEMS7_8YsQsr\/s16000\/blogger-conditional-tags.jpg\" title=\"Blogger Conditional Tags dengan data:view.pageId dan data:view.postId\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cp\u003EYaitu dengan langsung memanfaatkan ID pada masing-masing post dan page, yang biasanya dipanggil menggunakan data global\u0026nbsp;\u003Ccode\u003E\u0026lt;data:blog.pageId\/\u0026gt;\u003C\/code\u003E dan \u003Ccode\u003E\u0026lt;data:blog.postId\/\u0026gt;\u003C\/code\u003E.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EMasalah dalam Penggunaan Conditional Tags pada Page \/ Post Tertentu\u003C\/h2\u003E\u003Cp\u003EMasalah umum yang sering terjadi saat menerapkan tag kondisional untuk halaman tertentu diantaranya adalah sebagai berikut.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003ETidak muncul sama sekali.\u003C\/li\u003E\u003Cli\u003EBerhasil pada tampilan desktop tetapi gagal pada tampilan mobile.\u003C\/li\u003E\u003C\/ul\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EMasalah error tersebut seringkali terjadi pada kondisi pengecualian, yang biasanya ditulis dengan seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:view.isHomepage or data:view.isPage and data:view.url != data:blog.homepageUrl.canonical path \u0026amp;quot;p\/about.html\u0026amp;quot; and data:view.url != data:blog.homepageUrl.canonical path \u0026amp;quot;p\/contact.html\u0026amp;quot;'\u0026gt;\u003C\/blockquote\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EAtau seperti ini:\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cp\u003E\u0026lt;b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + \u0026amp;quot;p\/page.html\u0026amp;quot;'\u0026gt;\u0026nbsp;\u003C\/p\u003E\u003Cp\u003E\u0026lt;b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + \u0026amp;quot;2015\/04\/post.html\u0026amp;quot;'\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;b:if cond='data:view.isPage and !data:view.url.canonical contains \"\/p\/test-page-\"'\u0026gt;\u003C\/p\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Menerapkan Conditional Tags\u0026nbsp;data:view.pageId dan data:view.postId\u003C\/h2\u003E\u003Cp\u003ESebagai contoh, pada tutorial ini misalnya Anda ingin menyembunyikan kode iklan Adsense pada Page atau Post tertentu.\u003C\/p\u003E\u003Cp\u003EMaka langkah-langkahnya kurang lebih seperti berikut ini.\u003C\/p\u003E\u003Cp\u003ETerlebih dahulu, silahkan buka blog editor Page atau Post yang diinginkan.\u003C\/p\u003E\u003Cp\u003ELalu perhatikan URLnya, lokasi \u003Ccode\u003EpageId\u003C\/code\u003E atau \u003Ccode\u003EpostId\u003C\/code\u003E adalah seperti yang diseleksi pada gambar di bawah ini:\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara Menerapkan Conditional Tags data:view.pageId dan data:view.postId\" border=\"0\" data-original-height=\"510\" data-original-width=\"972\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEj6a01BmXch1QrDdk5JNJhBX68S2F1GncqoigbEPwGok2H7b5_s4XpyEpSy-kEsjDVLfkUDLxae0jSpjwz172fatxZgbgn56gHz7fzJXI3nE9pCJB25Du08syQnBzhvwit4TIqebMF_D_gbQmkiHPz1cluSKX5huuK1eE7H1o-Nkhp9_ChqMNWfnbz_GPU0\/s16000\/tag-conditional-page.jpg\" title=\"Cara Menerapkan Conditional Tags data:view.pageId dan data:view.postId\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cp\u003EPisahkan antara \u003Ccode\u003EpageId\u003C\/code\u003E dan \u003Ccode\u003EpostId\u003C\/code\u003E yang ingin dikondisikan tersebut.\u0026nbsp;\u003C\/p\u003E\u003Cp\u003ESetelah itu silahkan buka tema editor, dengan mengklik menu \u003Cb\u003ETheme\u003C\/b\u003E \u0026gt; \u003Cb\u003EEdit 糖心vlog官方入口\u003C\/b\u003E.\u003C\/p\u003E\u003Cp\u003EKemudian ikuti contoh penerapannya seperti berikut ini.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EPage (Halaman)\u003C\/h3\u003E\u003Cp\u003EMisalnya kode iklan ingin disembunyikan pada halaman 'About' dan 'Contact', dengan masing-masing pageId dari halaman tersebut adalah '123456789' dan '987654321' maka cara penerapannya adalah seperti ini:\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:view.isHomepage or data:view.isPage and !(data:view.pageId in [123456789, 987654321])'\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- kode iklan Adsense disini --\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EPost (Postingan)\u003C\/h3\u003E\u003Cp\u003EDan untuk menyembunyikan kode iklan pada postingan tertentu, Anda bisa menggunakan tag kondisi seperti ini:\u003C\/p\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:view.isHomepage or data:view.isPost and !(data:view.postId in [1223334444, 5667778888, 999999999])'\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- kode iklan Adsense disini --\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cp\u003ELanjutan:\u0026nbsp;\u003Cb\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-url-contains.html\"\u003EBlogger Conditional Tags URL Contains\u003C\/a\u003E\u003C\/b\u003E\u003C\/p\u003E\u003Cp\u003EDemikian, semoga bermanfaat dan berhasil diterapkan.\u003C\/p\u003E\u003Cp\u003E\u003Cem\u003E\u003Cspan style=\"font-size: x-small;\"\u003ESumber: https:\/\/support.google.com\/blogger\/thread\/271332217\/how-to-use-conditional-tags-properly?hl=en\u003C\/span\u003E\u003C\/em\u003E\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/7323203411485588145\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-pageid-postid.html#comment-form","title":"3 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7323203411485588145"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7323203411485588145"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/07\/blogger-conditional-tags-pageid-postid.html","title":"Blogger Conditional Tags dengan data:view.pageId dan data:view.postId"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiaNUU9I8CHlgLdHcr2KwQEPsVnbKUWuy6KEpuBd0XeRlOY1EFxg0f1WHJ13f24LxnNKByCkqVHFWk-xXloIyoTCE0gKI-m8YKDp8h9Pdr5crSNARg4H2VqKs82BZ0paQL2CiWGHbo3QVAX3F5JZYnZ7rZj_2jzbblurqT1y4uqUV5i-U-xlEMS7_8YsQsr\/s72-c\/blogger-conditional-tags.jpg","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-7050144844285124162"},"published":{"$t":"2024-02-11T21:33:00.011+07:00"},"updated":{"$t":"2024-08-29T09:04:03.065+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tips SEO"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Memasang 糖心vlog官方入口 Parse Codes di Blogger"},"content":{"type":"html","$t":"\u003Cp\u003E\u003Cb\u003ECara Pasang Parse Code 糖心vlog官方入口 Widget Tools di Blog yang Valid 糖心vlog官方入口5\u003C\/b\u003E - Parse 糖心vlog官方入口 adalah salah satu tools yang digunakan untuk mengkonversi kode, macam kode iklan. Biasanya kode iklan yang di parse adalah iklan yang nantinya akan tampil di dalam postingan, baik di atas, di tengan, maupun di bawah postingan.\u003C\/p\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Widget Parse Kode 糖心vlog官方入口 Tools di Blog\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiOq7R_ffkkeZdKt3Th1gA0CMIwroQC-ak7ouRMe0uhM1LiHYKGR66H75T6PuqsaXOyzrrlIqXfh2uGHEs6HRq0Pz-vdg6AcLGbpz-wXiQmpqhp6mN_uPJgCu_BGpFE0LFgTbaj4i7QBFAj\/s1600\/parse-kode-html-widget.png\" title=\"Cara Widget Parse Kode 糖心vlog官方入口 Tools di Blog\" \/\u003E\u003C\/div\u003E\n\u003Cp\u003ETools ini juga sangat mudah digunakan oleh newbiew sekalipun, sebab cukup menekan satu tombol saja kode 糖心vlog官方入口 langsung diparse. Tools ini sangat cocok dipasang pada blog yang membahas tentang berbagai tutorial seputar script\/coding website atau blog.\u003C\/p\u003E\n\u003Cp\u003EBaca juga: \u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/04\/cara-membuat-photoshop-online.html\"\u003ECara Membuat Photoshop Online di Blog\u003C\/a\u003E\u003C\/p\u003E\n\u003Cp\u003EBagi yang ingin tau seperti apa tools parse 糖心vlog官方入口 itu, kolom di bawah ini adalah contohnya. Silahkan masukkan kode iklan anda disana, lalu klik Parse Script.\u003C\/p\u003E\n\u003Ch2\u003EParse 糖心vlog官方入口 Blogger XML Templates\u003C\/h2\u003E\n\u003Cbr \/\u003E\n\u003Cscript type=\"text\/javascript\"\u003E\nfunction convert(){var ele1 = document.getElementById(\"somewhere\");var replaced;replaced = ele1.value;replaced = replaced.replace(\/\u0026\/ig, \"\u0026amp;\");replaced = replaced.replace(\/\u003C\/ig, \"\u0026lt;\");replaced = replaced.replace(\/\u003E\/ig, \"\u0026gt;\");replaced = replaced.replace(\/\"\/ig, \"\u0026quot;\");replaced = replaced.replace(\/\u0026#177;\/ig, \"\u0026plusmn;\");replaced = replaced.replace(\/\u0026#169;\/ig, \"\u0026copy;\");replaced = replaced.replace(\/\u0026#174;\/ig, \"\u0026reg;\");replaced = replaced.replace(\/ya'll\/ig, \"ya'll\");ele1.value = replaced;}\n\u003C\/script\u003E\n\u003Cbr \/\u003E\n\u003Ctable style=\"margin: 0px auto;\"\u003E\u003Ctbody\u003E\n\u003Ctr\u003E \u003Ctd\u003E\u003Ctextarea id=\"somewhere\" placeholder=\"Paste your html or code here...\" style=\"background: none 0% 0% repeat scroll rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 100%;border:2px solid var(--main-color);border-radius:10px;box-shadow:none; padding:1rem;resize: vertical; box-sizing:border-box\" resize=\"vertical\"\u003E\u003C\/textarea\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"tool-btn preview-btn\"\u003E\n  \u003Cinput class=\"t-btn btn-convert\" onclick=\"convert();\" type=\"button\" value=\"Parse Script\" \/\u003E\n\u003C\/div\u003E\n\u003C\/td\u003E \u003C\/tr\u003E\n\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Ci class=\"separate\"\u003E\u003C\/i\u003E\n\u003Cp\u003EGunakan \u003Ca href=\"https:\/\/www.bungfrangki.com\/p\/html-parse.html\" target=\"_blank\"\u003E\u003Cb\u003E糖心vlog官方入口 Parse\u003C\/b\u003E\u003C\/a\u003E yang lebih baik.\u003C\/p\u003E\n\u003Ch2\u003ECara pasang widget parse kode 糖心vlog官方入口 di blogspot\/Blogger\u003C\/h2\u003E\n\u003Cp\u003EAnda pun dapat memasang parse 糖心vlog官方入口 sendiri di blog anda. Kopi kode di bawah ini dan letakkan dimana saja yang ingin anda inginkan. Jika ingin meletakkanya di sidebar, taruh di 糖心vlog官方入口\/JavaScript dan jika ingin meletakkanya di halaman postingan atau halaman static maka harus melalui layanan 糖心vlog官方入口.\u003C\/p\u003E\n\u003Cbr\/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction convert(){var ele1 = document.getElementById(\"somewhere\");var replaced;replaced = ele1.value;replaced = replaced.replace(\/\u0026amp;\/ig, \"\u0026amp;amp;\");replaced = replaced.replace(\/\u0026lt;\/ig, \"\u0026amp;lt;\");replaced = replaced.replace(\/\u0026gt;\/ig, \"\u0026amp;gt;\");replaced = replaced.replace(\/\"\/ig, \"\u0026amp;quot;\");replaced = replaced.replace(\/\u0026amp;#177;\/ig, \"\u0026amp;plusmn;\");replaced = replaced.replace(\/\u0026amp;#169;\/ig, \"\u0026amp;copy;\");replaced = replaced.replace(\/\u0026amp;#174;\/ig, \"\u0026amp;reg;\");replaced = replaced.replace(\/ya'll\/ig, \"ya'll\");ele1.value = replaced;}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;table style=\"margin:0 auto\"\u0026gt;\u0026lt;tbody\u0026gt;\u003Cbr \/\u003E\n\u0026lt;tr\u0026gt; \u0026lt;td\u0026gt;\u0026lt;textarea id=\"somewhere\" style=\"background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px\"\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;input onclick=\"convert();\" style=\"padding: 5px;\" type=\"button\" value=\"Parse Script\" \/\u0026gt;\u0026lt;\/td\u0026gt; \u0026lt;\/tr\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/tbody\u0026gt;\u0026lt;\/table\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cp\u003ESetelah itu, Publishkan atau Save postingan.\u003C\/p\u003E\n\u003Cp\u003EDemikian tutorial tentang \u003Cb\u003ECara Memasang Widget Parse Kode 糖心vlog官方入口 Tools di Blog yang Valid 糖心vlog官方入口5\u003C\/b\u003E. Semoga membantu dan selamat mencoba.\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/7050144844285124162\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7050144844285124162"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7050144844285124162"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html","title":"Cara Memasang 糖心vlog官方入口 Parse Codes di Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiOq7R_ffkkeZdKt3Th1gA0CMIwroQC-ak7ouRMe0uhM1LiHYKGR66H75T6PuqsaXOyzrrlIqXfh2uGHEs6HRq0Pz-vdg6AcLGbpz-wXiQmpqhp6mN_uPJgCu_BGpFE0LFgTbaj4i7QBFAj\/s72-c\/parse-kode-html-widget.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-7264329670499159425"},"published":{"$t":"2023-06-15T08:28:00.001+07:00"},"updated":{"$t":"2023-06-15T08:29:20.032+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AMP 糖心vlog官方入口"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":"Cara Memasang Google Analytics 4 (GA4) di AMP"},"content":{"type":"html","$t":"\u003Cp\u003ESeperti yang diketahui, bahwa\u0026nbsp;properti lawas Google Analytics (universal analytics) benar-benar akan berhenti memproses data mulai 1 Juli 2023. Artinya, properti tersebut tidak dapat lagi digunakan untuk melihat \u003Ci\u003Epage views\u003C\/i\u003E, \u003Ci\u003Etraffics\u003C\/i\u003E, \u003Ci\u003Ebacklinks \u003C\/i\u003Edan lainnya untuk blog atau website terkait.\u0026nbsp;\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgfm9jQZbPSiSikRO0HPw5sdZtFGzKYsCnU6ldkh5aGWMK6ppcGxHj5V2zqaqoJ88kL8dfQNm79lLsli1WKHdTwRJ_kayaZDd_U00GkT5-e77amwKgF8rCase8YttcERC1sB_jmHAoqR0qrlUALhI2vjVMRJrDOqnJ0Fx-OhMPBc8dpC5m_vXACVkQ3dQ\/s1200\/pasang-google-analytics-ga4-di-amp.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Cara Memasang Google Analytics 4 (GA4) di AMP\" border=\"0\" data-original-height=\"675\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgfm9jQZbPSiSikRO0HPw5sdZtFGzKYsCnU6ldkh5aGWMK6ppcGxHj5V2zqaqoJ88kL8dfQNm79lLsli1WKHdTwRJ_kayaZDd_U00GkT5-e77amwKgF8rCase8YttcERC1sB_jmHAoqR0qrlUALhI2vjVMRJrDOqnJ0Fx-OhMPBc8dpC5m_vXACVkQ3dQ\/s16000\/pasang-google-analytics-ga4-di-amp.jpg\" title=\"Cara Memasang Google Analytics 4 (GA4) di AMP\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cp\u003E\u003Cp\u003EPun hal sama berlaku untuk blog atau website pengguna AMP (Accelerated Mobile Pages). Untuk itu, semua pengguna properti lawas dari Google Analytics, dianjurkan untuk migrasi ke properti Google Analytics V4. Mula-mulai dianjurkan untuk mengikuti panduan di '\u003Cb\u003EAsisten Penyiapan\u003C\/b\u003E'.\u003C\/p\u003E\u003Cp\u003ELangkah ini penting dilakukan untuk berbagi berbagai data antar properti, baik properti Analytics yang lama maupun yang terbaru.\u003C\/p\u003E\u003Cp\u003ENamun demikian, di porperti teranyar ini kita tetap tidak diberikan script kode pelacakan khusus untuk AMP. Maka solusinya pergi ke Documentation amp-dev, pada tab pembahasan \u003Ca href=\"https:\/\/amp.dev\/documentation\/components\/amp-analytics\" rel=\"nofollow\" target=\"_blank\"\u003Eamp-analytics\u003C\/a\u003E.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Pasang GA4 di Blog AMP\u003C\/h2\u003E\u003Ch3 style=\"text-align: left;\"\u003EBuka Asisten Penyiapan GA4\u003C\/h3\u003E\u003Cdiv\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003EPeriksa '\u003Cb\u003EOpen Connected Property\u003C\/b\u003E', pastikan properti GA lama dan GA4 sudah terhubung atau \u003Ci\u003Econnected\u003C\/i\u003E.\u003C\/li\u003E\u003Cli\u003EBuka tab menu \u003Cb\u003ESetup Asistant di GA4\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003EPada opsi-opsi yang ada, silahkan pilih \u003Cb\u003E\u003Ci\u003EMark as complete\u003C\/i\u003E\u003C\/b\u003E.\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEionHDeHrWf_GTop-fpJIG24lVr7u9tfGmg9is3bvioKJn3ig5-lN-pDsuSyRQyq7rHmGjv6WfAPjUPb7mYDtmnClyw85wKEkToLrlak5V_w6WYu_OaScWQ3f4BShtdi8Dr4Gw8Hh0PjGO3FesJIs14jwk-uAwFb7Mayni_xZd_a4z1AQAlGbW5I-Uifg\/s1200\/pasang-ga4-di-blog-amp.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Cara Pasang GA4 di Blog AMP\" border=\"0\" data-original-height=\"660\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEionHDeHrWf_GTop-fpJIG24lVr7u9tfGmg9is3bvioKJn3ig5-lN-pDsuSyRQyq7rHmGjv6WfAPjUPb7mYDtmnClyw85wKEkToLrlak5V_w6WYu_OaScWQ3f4BShtdi8Dr4Gw8Hh0PjGO3FesJIs14jwk-uAwFb7Mayni_xZd_a4z1AQAlGbW5I-Uifg\/s16000\/pasang-ga4-di-blog-amp.jpg\" title=\"Cara Pasang GA4 di Blog AMP\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EGanti Kode Google Analytics AMP yang Lama\u003C\/h3\u003E\u003Cp\u003EUntuk pemasangan Google Analytics (versi lama) di AMP biasanya diterapkan seperi berikut ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u003Cp\u003E\u0026lt;amp-analytics\u0026nbsp; type=\"gtag\" id=\"analytics1\" data-credentials=\"include\" \u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;script type=\"application\/json\"\u0026gt;\u003C\/p\u003E\u003Cp\u003E{\"vars\":{\"gtag_id\":\"\u003Cb\u003EUA-XXXXXXXXX-1\u003C\/b\u003E\",\"config\":{\"\u003Cb\u003EUA-XXXXXXXXX-1\u003C\/b\u003E\":{\"groups\":\"default\"}},\"anonymizeIP\":\"true\"},\"triggers\":{\"trackPageview\":{\"on\":\"visible\",\"request\":\"pageview\"}}}\u003C\/p\u003E\u003Cp\u003E\u0026lt;\/script\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;\/amp-analytics\u0026gt;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EKode Script Google Analytics 4 (GA4) di AMP\u003C\/h3\u003E\u003Cp\u003ENah, untuk cara memasang Google Analytics 4 (GA4) di website atau blog AMP, dapat menggunakan kode berikut ini.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u003Cp\u003E\u0026lt;amp-analytics type=\"googleanalytics\" config=\"https:\/\/amp.analytics-debugger.com\/ga4.json\" data-credentials=\"include\" class=\"i-amphtml-layout-fixed i-amphtml-layout-size-defined\" style=\"width:1px;height:1px\" i-amphtml-layout=\"fixed\"\u0026gt;\n\u0026nbsp; \u0026lt;script type=\"application\/json\"\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \"vars\": {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"GA4_MEASUREMENT_ID\": \"\u003Cb\u003EG-XXXXXXXXXX\u003C\/b\u003E\",\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"GA4_ENDPOINT_HOSTNAME\": \"www.google-analytics.com\",\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"DEFAULT_PAGEVIEW_ENABLED\": true,\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"GOOGLE_CONSENT_ENABLED\": false,\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"WEBVITALS_TRACKING\": false,\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"PERFORMANCE_TIMING_TRACKING\": false,\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \"SEND_DOUBLECLICK_BEACON\": false\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026lt;\/script\u0026gt;\n\u0026lt;\/amp-analytics\u0026gt;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EGanti G-XXXXXXXXXX dengan ID GA4 Blog Masing-masing\u003C\/h3\u003E\u003Cp\u003ESilahkan ganti GA4 id\u0026nbsp;G-XXXXXXXXXX pada script di atas, dengan kode Google Analytics versi 4 untuk blog atau website Anda.\u003C\/p\u003E\u003Cp\u003ESimpan perubahan dan selesai.\u003C\/p\u003E\u003Cp\u003EInfo Tambahan\u003C\/p\u003E\u003Cp\u003EPastikan elemen amp-analytics seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;script src=\"https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.mjs\" async=\"\" custom-element=\"amp-analytics\" type=\"module\" crossorigin=\"anonymous\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EAtau yang seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;script async nomodule src=\"https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.js\" crossorigin=\"anonymous\" custom-element=\"amp-analytics\"\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003ESudah terpasang di blog, agar AMP Analytics dapat berjalan dengan baik.\u003C\/p\u003E\u003Cp\u003E\u003Cbr \/\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr \/\u003E\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/7264329670499159425\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/06\/cara-memasang-ga4-di-amp.html#comment-form","title":"5 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7264329670499159425"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7264329670499159425"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/06\/cara-memasang-ga4-di-amp.html","title":"Cara Memasang Google Analytics 4 (GA4) di AMP"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgfm9jQZbPSiSikRO0HPw5sdZtFGzKYsCnU6ldkh5aGWMK6ppcGxHj5V2zqaqoJ88kL8dfQNm79lLsli1WKHdTwRJ_kayaZDd_U00GkT5-e77amwKgF8rCase8YttcERC1sB_jmHAoqR0qrlUALhI2vjVMRJrDOqnJ0Fx-OhMPBc8dpC5m_vXACVkQ3dQ\/s72-c\/pasang-google-analytics-ga4-di-amp.jpg","height":"72","width":"72"},"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-9156797441754879061"},"published":{"$t":"2023-04-08T20:34:00.000+07:00"},"updated":{"$t":"2024-12-19T10:39:14.838+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Daftar Isi"},{"scheme":"http://www.blogger.com/atom/ns#","term":"糖心vlog官方入口"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":" Membuat Table of Contents (ToC) Otomatis di Blogger"},"content":{"type":"html","$t":"\u003Cp\u003E\u003Cb\u003EMembuat Daftar Isi Table of Content (ToC) Otomatis di Blogger\u003C\/b\u003E 鈥� Adapun Table of Content atau daftar isi artikel di Blogger \/ Blogspot ini benar-benar otomatis mirip seperti ToC pada plugin-plugin WordPress. Yang juga dilengkapi dengan tombol \u003Ci\u003Eshow-hide\u003C\/i\u003E.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Membuat Daftar Isi Table of Content (ToC) Otomatis di Blogger\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi3_ImZFEUj0XbXbIl4v7rIqi6TX4a6LklvFVNaLmTQxpDoY_iYfiOZHCZkWtOUljizGv-TPBd4MYAoaUG2drSgwMDkkjN-qatr3XmI7oYFkqBk5P4BcwrJO3J_9sZ99s8DBe1WLsbnUHIGmWMPaW96EjrnkkRgHqqoWkIwvBZ48X97qLpxwHIz5MaO5g\/s16000\/table-of-content-tos-otomatis-blogger-blogspot.jpg\" title=\"Membuat Daftar Isi Table of Content (ToC) Otomatis di Blogger\" \/\u003E\u003C\/div\u003E\u003Cp\u003EPenggunaan Table of Contents tidak perlu melakukan pengeditan pada setiap postingan. Juga tidak menggunakan jQuery library dan FontAwesome, sehingga loading blog tetap lebih ringan.\u003C\/p\u003E\u003Cp\u003EAnda hanya perlu menyimpan JavaScript (Vanilla JS) di bawah ini, di atas \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E Blogger atau Blogspot Anda, maka secara otomatis Table of Content akan muncul pada setiap postingan yang memiliki Tag Heading (h1, h2, h3, h4, h5, atau h6) dengan jumlah tertentu (sesuai setelan). Sementara \u003Ci\u003Epermalink\u003C\/i\u003E-nya adalah hasil generate sesuai judul dari masing-masing heading.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EApakah Table of Contents itu SEO Friendly?\u003C\/h2\u003E\u003Cp\u003ESederhananya, fitur Table of Content atau ToC di Blogger memberikan ringkasan atau deskripsi singkat akan pokok-pokok bahasan pada artikel, yang berdasar pada penggunaan Tag Heading.\u003C\/p\u003E\u003Cp\u003ENah, inilah yang akan 鈥榙ibaca鈥� oleh Search Engine untuk menjadi dasar isi dari artikel. Dalam hal ini, terkadang hasil generate tag heading tersebut menjadi cikal-bakal Anchor Link yang akan ditampilkan pada hasil pencarian, ketika pengguna mengetikkan keyword yang tepat atau mirip.\u003C\/p\u003E\u003Cp\u003EMaka dapat dikatakan bahwa penggunaan fitur Table of Contents di blog\/website bisa saja berpengaruh dan mempengaruhi SEO artikel blog.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cblockquote class=\"link\"\u003EBaca Juga:\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html\" target=\"_blank\"\u003ECara Memasang Parse Kode 糖心vlog官方入口 Tools di Blogger\u003C\/a\u003E\u003C\/blockquote\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html\" target=\"_blank\"\u003E\u003C\/a\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Memasang Table of Contents di Blogger\u003C\/h2\u003E\u003Cp\u003EBerikut langkah-langkah cara pasang Table of Content (ToC) atau daftar isi konten di Blogger atau Blogspot:\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EKode JavaScript\u003C\/h3\u003E\u003Cp\u003ESilahkan buka pengeditan 糖心vlog官方入口 Blogger di Edit 糖心vlog官方入口.\u003C\/p\u003E\u003Cp\u003ELalu cari kode \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;!--\u0026lt;\/body\u0026gt;--\u0026amp;gt;\u0026amp;lt;\/body\u0026amp;gt;\u003C\/code\u003E\u003C\/p\u003E\u003Cp\u003ELetakkan JavaScript Table of Contents berikut ini di atasnya:\u003C\/p\u003E\n\u003Cpre class=\"javascript\"\u003E\u003Ccode\u003E\n\u0026lt;script\u0026gt;\n\/\/\u0026lt;![CDATA[ \n\/\/ var contentContainer = document.querySelectorAll(\".post-body\")[0].id = \"toc-container\";\nvar contentContainer = document.querySelectorAll(\".post-body\")[0];\nconst dataTracking = contentContainer.setAttribute(\"data-tracking-container\", \"true\");\nvar headings = contentContainer.querySelectorAll(\"h1,h2,h3,h4,h5,h6\");\nvar showtoc = contentContainer.querySelectorAll(\".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6\");\nif (headings.length \u0026gt; 3) {\nfor (i = 0; i \u0026lt;= showtoc.length - 1; i++) {\nvar tocauto = showtoc[i];  \ntocauto.insertAdjacent糖心vlog官方入口('beforebegin','\u0026lt;div class=\"toc-auto\"\u0026gt;\u0026lt;input id=\"toc-sh\" type=\"checkbox\"\u0026gt;\u0026lt;label class=\"toc-title\" for=\"toc-sh\"\u0026gt;Table of Contents\u0026lt;\/label\u0026gt;\u0026lt;div class=\"toc\" id=\"toc\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;');\ntocatr = document.querySelectorAll(\".toc-auto\")[0];\ntocatr.setAttribute('data-tracking-container', 'true');\nvar toptoc = document.querySelectorAll(\".toc-auto\");\n[].filter.call(toptoc, function(tocselection) {\n    return ![].some.call(tocselection.attributes, function(attr) {\n        return \/^data-tracking-container\/i.test(attr.name);\n    });\n}).forEach(function(tocselection) {\n    tocselection.parentNode.removeChild(tocselection);\n});};}\nclass TableOfContents {\n    constructor({ from, to }) {\n        this.fromElement = from;\n        this.toElement = to;\n        \/\/ Get all the ordered headings.\n        this.headingElements = this.fromElement.querySelectorAll(\"h1, h2, h3, h4, h5, h6\");\n        this.tocElement = document.createElement(\"div\");\n    }\n    getMostImportantHeadingLevel() {\n        let mostImportantHeadingLevel = 6;\n        for (let i = 0; i \u0026lt; this.headingElements.length; i++) {\n            let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);\n            mostImportantHeadingLevel = (headingLevel \u0026lt; mostImportantHeadingLevel) ?\n                headingLevel : mostImportantHeadingLevel;\n        }\n        return mostImportantHeadingLevel;\n    }\n    static generateId(headingElement) {\n        return headingElement.textContent.toLowerCase().replace(\/ \/g,\"_\").replace(\/\\\/\/g,\"_\").replace(\/\u0026amp;lt;\/g,\"\").replace(\/\u0026amp;gt;\/g,\"\").replace(\/\u0026amp;amp;\/g,\"\").replace(\/\u0026amp;amp;nbsp;\/g,\"\").replace(\/\u0026amp;nbsp;\/g,\"\").replace(\/\\xA0\/g,\"\").replace(\/[\\n\\r\\f]+\/g, \"\").replace(\/[.,\\#!$%\\^\u0026amp;\\*;:{}=\\-@`~()\u0026lt;\u0026gt;?\"'鈥�+鈥漖\/g,\"\");\n    }\n    static getHeadingLevel(headingElement) {\n        switch (headingElement.tagName.toLowerCase()) {\n            case \"h1\": return 1;\n            case \"h2\": return 2;\n            case \"h3\": return 3;\n            case \"h4\": return 4;\n            case \"h5\": return 5;\n            case \"h6\": return 6;\n            default: return 1;\n        }\n    }\n\n    generateToc() {\n        let currentLevel = this.getMostImportantHeadingLevel() - 1,\n            currentElement = this.tocElement;\n\n        for (let i = 0; i \u0026lt; this.headingElements.length; i++) {\n            let headingElement = this.headingElements[i],\n                headingLevel = TableOfContents.getHeadingLevel(headingElement),\n                headingLevelDifference = headingLevel - currentLevel,\n                linkElement = document.createElement(\"a\");\n\n            if (!headingElement.id) {\n                headingElement.id = TableOfContents.generateId(headingElement);\n            }\n            linkElement.href = `#${headingElement.id}`;\n            linkElement.textContent = headingElement.textContent;\n\n            if (headingLevelDifference \u0026gt; 0) {\n                for (let j = 0; j \u0026lt; headingLevelDifference; j++) {\n                    let listElement = document.createElement(\"ul\"),\n                        listItemElement = document.createElement(\"li\");\n                    listElement.appendChild(listItemElement);\n                    currentElement.appendChild(listElement);\n                    currentElement = listItemElement;\n                }\n                currentElement.appendChild(linkElement);\n            } else {\n                for (let j = 0; j \u0026lt; -headingLevelDifference; j++) {\n                    currentElement = currentElement.parentNode.parentNode;\n                }\n                let listItemElement = document.createElement(\"li\");\n                listItemElement.appendChild(linkElement);\n                currentElement.parentNode.appendChild(listItemElement);\n                currentElement = listItemElement;\n            }\n\n            currentLevel = headingLevel;\n        }\n\n        this.toElement.appendChild(this.tocElement.firstChild);\n    }\n}\ndocument.addEventListener(\"DOMContentLoaded\", () =\u0026gt;\n    new TableOfContents({\n        from: document.querySelector(\".post-body\"),\n        to: document.querySelector(\".toc\")\n    }).generateToc()\n);\n\n\/\/]]\u0026gt;\n  \u0026lt;\/script\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Ch3 style=\"text-align: left;\"\u003EKode CSS\u003C\/h3\u003E\u003Cp\u003ETambahkan kode CSS berikut di atas \u003Ccode\u003E\u0026lt;\/style\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/code\u003E untuk mengatur tampilan Table of Content. Termasuk mengatur Table of Contents agar bisa \u003Ci\u003Eshow-hide\u003C\/i\u003E.\u003C\/p\u003E\n\u003Cpre class=\"css\"\u003E\u003Ccode\u003E\nhtml {\n  scroll-behavior: smooth;\n}\n\/* TOC style bungfrangki.com *\/\n.toc-auto {\n    display: table;\n    position: relative;\n    border-radius: 3px;\n    background-color: var(--widget-bg,#f6f9fc);\n    padding: 1rem 1rem.85rem;\n    margin: 0 0 1.5rem;\n}\n.toc-auto a {\n  transition: .3s ease-in;\n  text-decoration:none;\n}\n.toc-auto a:hover, .toc-auto .current {\n    text-decoration: underline !important;\n    color: var(--a-hover,#fe8f04);\n}\n.toc-auto input[type=\"checkbox\"] {\n    display: none;\n}\n.toc-title {\n    font-weight: 700 !important;\n    margin-top: 5px;\n}\n.toc-title:after {\n    content: '-';\n    background-color: var(--text-secondary,#a6e6e5);\n    border-radius: 3px;\n    clear: both;\n    float: right;\n    margin-left: 1rem;\n    cursor: pointer;\n    font-weight: 400 !important;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 25px;\n    height: 25px;\n    transition: .3s ease-in;\n}\n.toc-title:after:hover {\n    background-color: var(--main-color,#028271);\n    color: #fff;\n}\n.toc-auto .toc {\n    max-height: 100%;\n    max-width: 500px;\n    opacity: 1;\n    overflow: hidden;\n    transition: max-height .1s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;\n    visibility: visible;\n}\n.toc-auto ul li,ol li {\n    margin-bottom: 0 !important;\n}\n#toc-sh:checked~.toc-title:after {\n    content: '+';\n}\n#toc-sh:checked ~ .toc {\n    margin-top: 0;\n    max-height: 0;\n    max-width: 0;\n    opacity: 0;\n    transition: max-height 0s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;\n    visibility: hidden;\n}\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Ch3 style=\"text-align: left;\"\u003ESimpan Tema\u003C\/h3\u003E\u003Cp\u003ESetelah itu, silahkan simpan perubahan pada template Blogspot dengan klik ikon Simpan Tema.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ESetelan Table of Contents Otomatis di Blogger\u003C\/h2\u003E\u003Cp\u003ESedikit saya jelaskan tentang setelan Table of Contents otomatis ini agar sesuai dengan keinginan masing-masing, yaitu sebagai berikut:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003ESecara default Table of Contents ini akan otomatis muncul bila pada postingan terdapat lebih dari \u003Cb\u003E3\u003C\/b\u003E Tag Heading.\u003C\/li\u003E\u003Cli\u003EBila ingin mengubahnya dan ingin menampilkan Table of Content pada jumlah heading sesuai keinginan, silahkan ganti angka 3 pada kode\u003Ccode\u003E if (headings.length \u0026gt; \u003Cspan style=\"background-color: green;\"\u003E3\u003C\/span\u003E)\u003C\/code\u003E dengan angka lainnya.\u003C\/li\u003E\u003Cli\u003ETable of Contents akan muncul di atas Heading paling atas (bukan judul artikel). Terlepas dari apapun jenis Tag Headingnya. Entah itu \u003Ccode\u003E\u0026lt;h1\u0026gt;\u003C\/code\u003E, \u003Ccode\u003E\u0026lt;h2\u0026gt;\u003C\/code\u003E, \u003Ccode\u003E\u0026lt;h3\u0026gt;\u003C\/code\u003E, \u003Ccode\u003E\u0026lt;h4\u0026gt;\u003C\/code\u003E, \u003Ccode\u003E\u0026lt;h5\u0026gt;\u003C\/code\u003E, ataupun \u003Ccode\u003E\u0026lt;h6\u0026gt;\u003C\/code\u003E.\u003C\/li\u003E\u003Cli\u003EApabila ingin menampilkannya di bawah Tag Heading, ubah\u0026nbsp;\u003Ccode\u003Ebeforebegin\u003C\/code\u003E menjadi \u003Ccode\u003Eafterend\u003C\/code\u003E pada JavaScript.\u003C\/li\u003E\u003Cli\u003ETable of Contents hanya akan tampil bila template blogspot memiliki \u003Ci\u003Etag class\u003C\/i\u003E \u003Ccode\u003E.post-body\u003C\/code\u003E. Apabila tag tersebut tidak ada di template, Anda boleh menggantinya dengan selector lain pada kode: \u003Ccode\u003Evar contentContainer = document.querySelectorAll(\"\u003Cspan style=\"background-color: green;\"\u003E.post-body\u003C\/span\u003E\")\u003C\/code\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EPreview\u003C\/h2\u003E\u003Cp\u003EBerikut telah disediakan preview Table of Contents di CodePen untuk melihat hasilnya, sepebelum diterapkan di Blogger:\u003C\/p\u003E\u003Cdiv class=\"preview-btn codepen\"\u003E\u003Ca class=\"klik-preview\" href=\"https:\/\/codepen.io\/bungfrangki\/pen\/JjBgzZp\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003ECodePen\u003C\/a\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003EPenutup\u003C\/h2\u003E\u003Cp\u003EDemikian tutorial tentang cara memasang Table of Content (ToC) atau daftar isi otomatis di Blogger. Agar blog menjadi lebih SEO friendly dan user-friendly.\u003C\/p\u003E\u003Cp\u003ESemoga bermanfaat dan selamat mencoba.\u003C\/p\u003E\u003Cp\u003ENgomong-ngomong, tutorial ini bukanlah artikel lanjutan yang saya janjikan pada postingan sebelumnya, tentang \u003Ca href=\"https:\/\/www.bungfrangki.com\/2023\/02\/merubah-blockquote-tag-menjadi-pre-code.html\" target=\"_blank\"\u003Emengubah tag blockquote menjadi tag pre code dengan JavaScript di Blogger\u003C\/a\u003E.\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/9156797441754879061\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/02\/table-of-contents-otomatis-di-blogger.html#comment-form","title":"22 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/9156797441754879061"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/9156797441754879061"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/02\/table-of-contents-otomatis-di-blogger.html","title":" Membuat Table of Contents (ToC) Otomatis di Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi3_ImZFEUj0XbXbIl4v7rIqi6TX4a6LklvFVNaLmTQxpDoY_iYfiOZHCZkWtOUljizGv-TPBd4MYAoaUG2drSgwMDkkjN-qatr3XmI7oYFkqBk5P4BcwrJO3J_9sZ99s8DBe1WLsbnUHIGmWMPaW96EjrnkkRgHqqoWkIwvBZ48X97qLpxwHIz5MaO5g\/s72-c\/table-of-content-tos-otomatis-blogger-blogspot.jpg","height":"72","width":"72"},"thr$total":{"$t":"22"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-1999213132724667449"},"published":{"$t":"2023-04-03T12:54:00.001+07:00"},"updated":{"$t":"2023-04-03T12:55:47.630+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003E\u003Cb\u003ECara redirect 301 dari domain lama ke domain baru di Blogger atau Blogspot\u003C\/b\u003E ini juga berlaku bagi blog yang sudah menggunakan TLD (Top Level Domain). Intinya, masih pakai platform Blogger untuk membuat postingan.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEg5YTNqD66xFLRKiOCfVwtGJO7sJdDf1FSNGbLjn8OsESNvIQ8JnPpQkoA5xwgxsr3rWH5mXgnWNA0N0RVWtehWCdW5-3zcD4MHx4Tgj_fQTVm5P6Cjn-U2UqO8R37frQOhFMZKdLJuY8zT\/s1600\/Cara-Redirect-301-ke-Domain-Baru-di-Blogger-Blogspot.png\" title=\"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EApa Itu Redirect 301?\u003C\/h2\u003ERedirect 301 ialah upaya untuk me-redirect (mengalihkan) URL atau permalink blog lama ke permalink blog baru secara otomatis. Yang dialihakan bukan hanya antar halaman homepage saja, tetapi juga berlaku untuk halaman post dan static\/page.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAdapun model redirect 301 ini bisa dengan mengalihkan nama domain lama ke nama domain baru, misalnya \u003Ccode\u003Ehttps:\/\/domainlama.blogspot.com\u003C\/code\u003E di redirect ke \u003Ccode\u003Ehttps:\/\/domainbaru.blogspot.com\u003C\/code\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAtau bisa juga mengahlikan ke TLD yang baru (dengan nama domain yang sama). Contohnya \u003Ccode\u003Ehttps:\/\/www.namadomainku.com\u003C\/code\u003E menjadi \u003Ccode\u003Ehttps:\/\/www.namadomainku.net\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSecara lengkapnya, ilustrasi redirect 301 adalah sebagai berikut:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003Ehttps:\/\/www.namadomainku.com\/\u003Cbr \/\u003E\nhttps:\/\/www.namadomainku.com\/p\/halaman-static.html\u003Cbr \/\u003E\nhttps:\/\/www.namadomainku.com\/2019\/07\/permalink-postingan-blogger.html\u003C\/blockquote\u003E\u003Cbr \/\u003E\nJika kita ingin me-redirect ke TLD baru, maka masing-masing hasilnya akan seperti ini:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003Ehttps:\/\/www.namadomainku.net\/\u003Cbr \/\u003E\nhttps:\/\/www.namadomainku.net\/p\/halaman-static.html\u003Cbr \/\u003E\nhttps:\/\/www.namadomainku.net\/2019\/07\/permalink-postingan-blogger.html\u003C\/blockquote\u003E\u003Cbr \/\u003E\nRedirect 301 khususnya di Blogger atau Blogspot, akan sangat membantu banyak hal. Yang akan diuraikan berikut ini.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBaca juga:\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/08\/mengalihkan-url-error-404-ke-homepage.html\" target=\"_blank\"\u003EMengalihkan\/Redirect Otomatis URL Error 404 ke Homepage\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003EAlasan Melakukan Redirect 301\u003C\/h2\u003EAda berbagai alasan mengapa kita perlu melakukan redirect domain 301, antara lain sebagai berikut.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003E1. Domain dibanned Google Adsense\u003C\/b\u003E; Jika domain yang telah di banned oleh Adsense, maka kemungkinan untuk diterima kembali menjadi mitra Google Adsense adalah sebuah mimpi yang tak akan pernah terwujud. Solusinya adalah, semua artikel dipindahkan ke domain baru, lalu di redirect 301 dari domain lama.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003E2. Ingin menggabungkan beberapa blog menjadi satu\u003C\/b\u003E; Karena blog di domain lama masih bagus posisinya di Google serv, maka cara cerdas yang hendaknya dilakukan setelah mengimpor seluruh konten ke domain baru adalah, mengalihkan URL (permalink) domain lama ke URL domain baru. Sehingga pengunjung blog di domain baru makin bertambah. Bukan malah menghapus blog yang lama. Itu blunder!\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003E3. Nama domain lama terlihat jelek\u003C\/b\u003E; Mungkin karena ada kenangan mantan, maka nama blog pun akan terlihat seperti nama makhluk yang suka tulang.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nIntinya, tujuan atau alasan utama untuk melakukan redirect 301 ini adalah mempertahakan eksistensi pengunjung dan page views blog, ke domain baru. Karena sejatinya pengunjung tetap akan menikmati konten yang dia inginkan, tanpa disadari bahwa dia telah berada di URL domain baru.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBaca lainnya:\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2017\/12\/tidak-bisa-centang-redirect-non-www-to-www.html\" target=\"_blank\"\u003ECara Mengatasi Tidak Bisa Centang Redirect non WWW to WWW pada Blogger\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003ELangkah-langkah Menerapkan Redirect 301 di Blogger atau Blogspot\u003C\/h2\u003E\u003Cbr \/\u003E\n1. Siapkan nama domain baru atau TLD baru. Silahkan beli dulu ke jasa penyedia domain favorit Anda. Klik \u003Ca href=\"https:\/\/bit.ly\/2JomGXs\" rel=\"nofollow noopener\" targe=\"_blank\"\u003Edisini\u003C\/a\u003E bagi yang belum punya jasa penyedia domain favorit.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2. Bikin blog baru, lalu ganti domainnya dengan nama domain atau TLD yang baru dibeli tadi.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n3. Setelah proses propagasi domain selesai, dan domain baru itu sudah bisa diakses, silahkan login ke blog lama. Masuk ke menu \u003Cb\u003ESetelan\u003C\/b\u003E \u0026gt; \u003Cb\u003ELainnya\u003C\/b\u003E \u0026gt; klik \u003Cb\u003ECadangkan Konten\u003C\/b\u003E.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot\" data-original-height=\"479\" data-original-width=\"800\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEh4sBJ45UmVtLg5n5-Q6MgmMUVLwXuo-04KsnEPGN_LIhv_2P-oF9O6Jsb4cw5ZzFr4zcU8wcJEdwgefZ2Kyeq9AC9IWA2bQlC2ReqOrVEey0-PGj8AK0WXHhehAmMbG5OH3xqIH9K60qgd\/s1600\/Cara-Redirect-301-ke-Domain-Baru-di-Blogger-Blogspot-1.jpg\" title=\"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n4. Buka lagi dashboard domain baru tadi, lalu \u003Cb\u003EImpor Konten\u003C\/b\u003E yang tadi di download dari blog lama. Melalui menu \u003Cb\u003ESetelan\u003C\/b\u003E \u0026gt; \u003Cb\u003ELainnya\u003C\/b\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003ECatatan:\u003C\/b\u003E\u003Cbr \/\u003E\nSebelum melakukan Impor Koten jangan pilih \u003Cb\u003EPublish Otomatis\u003C\/b\u003E. Disarankan untuk posting artikel secara manual. Karena permalink blog lama harus sama persis dengan permalink di blog baru. Utamanya permalink halaman postingan.\u003C\/div\u003E\u003Cbr \/\u003E\n5. buka dashboard domain lama, pilih menu Template \u0026gt; Edit 糖心vlog官方入口. Cari kode \u003Ccode\u003E\u0026lt;\/head\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;!--\u0026lt;head\u0026gt;--\u0026amp;gt;\u0026amp;lt;head\u0026amp;gt;\u003C\/code\u003E lalu letakkan kode berikut ini di atas kode tadi.\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar d='\u0026lt;data:blog.url\/\u0026gt;';\u003Cbr \/\u003E\nd=d.replace(\/.*\\\/\\\/[^\\\/]*\/, '');\u003Cbr \/\u003E\nlocation.href = 'https:\/\/www.namadomainku.net' + window.location.pathname;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"tips\"\u003E\u003Cb\u003EPerhatian:\u003C\/b\u003E\u003Cbr \/\u003E\nSilahkan ganti \u003Ccode\u003Ehttps:\/\/www.namadomainku.net\u003C\/code\u003E dengan domain baru Anda.\u003C\/div\u003E\u003Cbr \/\u003E\n6. Simpan Template\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n7. Buka dashboard domain baru, buka menu \u003Cb\u003EPostingan\u003C\/b\u003E \u0026gt; \u003Cb\u003EDraf\u003C\/b\u003E. Silahkan edit satu-satu artikel yang ada disitu, dengan menyamakan permalink dari domain lama ke domain baru.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJangan lupa juga edit bagian body postingan melalui 糖心vlog官方入口 (bukan Compose), barangkali Anda menggunakan teknik internal link, yang domainnya dianjurkan untuk di ubah ke domain baru.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003EMengapa Ribet?\u003C\/h2\u003EItu karena kompleksitas Blogger tidak diberi fasilitas yang menyamankan layaknya WordPress, yang tinggal pakai plugin \u003Ca href=\"https:\/\/wordpress.org\/plugins\/velvet-blues-update-urls\/\" rel=\"nofollow\" target=\"_blank\"\u003EVelvet Blues Update Urls\u003C\/a\u003E dan seluruh permalink seketika berubah domainnya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSebagai saran saja, alangkah baiknya selesaikan dulu masalah postingan dan permalink di domain baru. Setelah seluruh artikel sukses terposting dan permalink telah dipastikan sama persis dengan yang ada di blog lama, maka barulah menerapkan langkah ke 5.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDemikian penjelasan tentang \u003Ca href=\"https:\/\/www.bungfrangki.com\/2019\/07\/cara-redirect-301-di-blogger.html\" target=\"_blank\"\u003Ecara redirect 301 dari domain lama ke domain baru di Blogger\u003C\/a\u003E atau Blogspot. Semoga bermanfaat. Jika ada komentar silahkan tuliskan, jika ada keinginan silahkan bagikan. Terima kasih!\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/1999213132724667449\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2019\/07\/cara-redirect-301-di-blogger.html#comment-form","title":"9 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1999213132724667449"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1999213132724667449"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2019\/07\/cara-redirect-301-di-blogger.html","title":"Cara Redirect 301 ke Domain Baru di Blogger\/Blogspot"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEg5YTNqD66xFLRKiOCfVwtGJO7sJdDf1FSNGbLjn8OsESNvIQ8JnPpQkoA5xwgxsr3rWH5mXgnWNA0N0RVWtehWCdW5-3zcD4MHx4Tgj_fQTVm5P6Cjn-U2UqO8R37frQOhFMZKdLJuY8zT\/s72-c\/Cara-Redirect-301-ke-Domain-Baru-di-Blogger-Blogspot.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-3744300870960958428"},"published":{"$t":"2023-02-11T15:48:00.001+07:00"},"updated":{"$t":"2023-02-11T15:48:20.924+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"糖心vlog官方入口"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":"Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript"},"content":{"type":"html","$t":"\u003Cp\u003ETutorial kali ini tentang merubah tag \u003Ci\u003E\u0026lt;blockquote\u0026gt;\u003C\/i\u003E menjadi tag \u003Ci\u003E\u0026lt;pre\u0026gt;\u0026lt;code\u0026gt;\u003C\/i\u003E dengan JavaScript, dalam hal ini Vanilla JavaScript. Mari kita bahas!\u003C\/p\u003E\u003Cdiv class=\"separator terselubung\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhVSG33tLmZGg8oVj_EX-kWcXiQ58Xb7n8s1T5yEY1oFBX9nmljuuWoIdqohVHO2ScJedbreNx2ax1AEOtrmkZSxE9N7eJ7st1ayfoT6XOK2X-eSFSyIaFt5wRqag8Otsuo1KLGBRNPI2p2T0C4XyCc6Tr3rnL8TGWW6os9NGQgaGoNnZu57vt6XQ8V3w\/s16000\/change-blockquote-tag-to-pre-code-tag-with-javascript.jpg\" title=\"Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript\" \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003EMukaddimah\u003C\/h2\u003E\u003Cp\u003ESalah satu kebiasaan unik para Blogger pemula adalah menggunakan tag Blockquote untuk membukus tampilan kode-kode CSS, 糖心vlog官方入口, JavaScript, ataupun XML.\u003C\/p\u003E\u003Cp\u003EBukan tanpa alasan, hal ini dilakukan karena kemudahan yang beriringan dengan keterbatasan pengetahuan dalam dasar-dasar nge-blog. Sehingga menjadi alergi untuk membuka opsi pengeditan di Tampilan 糖心vlog官方入口 di Post Editor Blogger.\u003C\/p\u003E\u003Cp\u003EKemudahan yang dimaksud ialah tag Blockquote atau Kutipan Teks menjadi salah satu menu di Post Editor, sementara tag Pre Code tidak ada di menu Post Editor. Tag Pre Code (beserta penutupnya) mesti diketik dalam tampilan 糖心vlog官方入口, yang saat itu melakukan pengeditan di tampilan 糖心vlog官方入口 ribetnya bukan main. Bikin jengkel!\u003C\/p\u003E\u003Cp\u003ESetidaknya begitu yang saya lakukan dan rasakan dulu. Sehingga begitu banyak artikel yang berisi kode-kode di blog ini yang terbungkus oleh tag \u0026lt;blockquote\u0026gt;. Yang membuat saya tidak bisa menerapkan \u003Ci\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-syntax-highlighter-otomatis-di-blogger.html\"\u003ESyntax Highlighter\u003C\/a\u003E\u003C\/i\u003E. Sebab Syntax Highlighter di Blogger hanya akan berfungsi sempurna bila pakai tag Pre Code.\u003C\/p\u003E\u003Cp\u003ENamun, sekarang saya hepi 馃榾. Karena saat ini seperti 鈥榯idak ada lagi鈥� kode-kode yang dibungkus oleh tag Blockquote.\u003C\/p\u003E\u003Cp\u003EKode-kode 糖心vlog官方入口, CSS, JavaScript, jQuery, Json maupun yang lainnya, kini terbungkus rapi oleh tag \u0026lt;pre\u0026gt;\u0026lt;code\u0026gt;, tanpa perlu edit postingan sama sekali. Sudah begitu, ditambah dengan penggunaan Syntax Highlighter, yang otomatis membuat kode-kode itu berwarna-warni dari atas sampai akhir. Dapat dikatakan bahwa semua kode tampil dengan mode Syntax Highlighter secara kaffah.\u003C\/p\u003E\u003Cp\u003EMau seperti itu? Begini caranya!\u003C\/p\u003E\u003Cp\u003EBaca juga: \u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html\" target=\"_blank\"\u003ECara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru\u003C\/a\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Merubah Tag \u0026lt;blockquote\u0026gt; Menjadi Tag \u0026lt;pre\u0026gt; \u0026lt;code\u0026gt; dengan JavaScript\u003C\/h2\u003E\u003Cp\u003EKode Javascript ini secara kebetulan ketemu di \u003Ca href=\"https:\/\/stackoverflow.com\/questions\/66111081\/how-to-search-and-replace-all-tags-in-html-file-using-vanilla-javascript\" target=\"_blank\"\u003EStack Overflow\u003C\/a\u003E, yang kemudian dimodifikasi sedikit agar dapat diterapkan sesuai kebutuhan.\u003C\/p\u003E\u003Cp\u003EBerikut langkah-langkah penerapa cara mengubah tag Blockquote menjadi tag Pre Code menggunakan JavaScript, dalam hal ini tanpa atau tidak menggunakn jQuery.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003E1. Langkah Awal\u003C\/h3\u003E\u003Cp\u003EMasuk atau login ke dashboard Blogger. Lalu ke menu Tema \u0026gt; Edit 糖心vlog官方入口.\u003C\/p\u003E\u003Cp\u003EKemudian cari kode \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;!--\u0026lt;\/body\u0026gt;--\u0026amp;gt;\u0026amp;lt;\/body\u0026amp;gt;\u003C\/code\u003E\u003C\/p\u003E\u003Cp\u003ELetakkan kode JavaScript berikut di atasnya.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003E2. Kode JavaScript\u003C\/h3\u003E\n\u003Cpre class='javascript'\u003E\u003Ccode\u003E\n\u0026lt;script\u0026gt;\n    \/\/\u0026lt;![CDATA[\nlet foundBlockquote = document.querySelectorAll(\u0026quot;blockquote\u0026quot;);\nfor(let i = 0; i \u0026lt; foundBlockquote.length; i++){\n  let camouflage = foundBlockquote[i];\n  let replacement = document.createElement(\u0026quot;pre\u0026quot;);\nreplacement.inner糖心vlog官方入口 += replacement.inner糖心vlog官方入口;\nreplacement.inner糖心vlog官方入口 += '\u0026lt;code\u0026gt;' + camouflage.inner糖心vlog官方入口 + '\u0026lt;\/code\u0026gt;';\n replacement.inner糖心vlog官方入口 = replacement.inner糖心vlog官方入口.replace(\/(\u0026lt;|\u0026amp;lt;)br\\s*\\\/*(\u0026gt;|\u0026amp;gt;)\/g,' ');\n  camouflage.replaceWith(replacement);\nconst addprelem = document.querySelectorAll(\u0026quot;pre\u0026quot;);\naddprelem.forEach(preatr =\u0026gt; { \npreatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });\n}\n\/\/]]\u0026gt;\n  \u0026lt;\/script\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Cp\u003ESetelah itu Simpan Tema.\u003C\/p\u003E\u003Cp\u003ESedikit saya perlu jelaskan. Adapun kode berikut:\u003C\/p\u003E\n\u003Cpre class='javascript'\u003E\u003Ccode\u003E\nconst addprelem = document.querySelectorAll(\u0026quot;pre\u0026quot;);\naddprelem.forEach(preatr =\u0026gt; { \npreatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\n\u003Cp\u003EBisa tidak digunakan atau dihapus saja. Dalam kasus ini, potongan kode tersebut saya perlu tambahkan karena dibutuhkan. Selengkapnya tentang hal ini akan mungkin dijelaskan pada artikel selanjutnya.\u003C\/p\u003E\u003Cp\u003EIntinya, kode tersebut untuk menambahkan \u003Ci\u003Eatribut \u003C\/i\u003Epada \u003Ci\u003Eelemen PRE\u003C\/i\u003E.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003E3. Kode CSS (Opsional)\u003C\/h3\u003E\u003Cp\u003ERapikan tampilan Pre Code dengan menambahkan CSS berikut ini. Silahkan salin dan simpan kode CSS berikut di atas \u003Ccode\u003E\u0026lt;\/style\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/code\u003E.\u003C\/p\u003E\n\u003Cpre class='css'\u003E\u003Ccode\u003E\n.post-body pre code, .post-body code {\n    font-family: Consolas,Monaco,\u0026#39;\n    Andale Mono\u0026#39;,monospace;font-size: 100%;\n    font-weight: normal;\n}\n\n.post-body pre {\n    padding: 7px;\n    border-radius: 4px;\n    background-color: #23241f;\n    word-spacing: normal;\n    word-break: normal;\n    line-height: 1.4em!important;\n}\n\npre,pre code {\n    white-space: pre-wrap;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Cp\u003ENamun bila di template Blogger Anda sudah ada kode CSS untuk mengatur tampilan pre code, maka CSS di atas tidak perlu ditambahkan lagi.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003E4. Terapkan\u0026nbsp; Syntax Highlighter (Opsional)\u003C\/h3\u003E\u003Cp\u003ELebih lanjut, Anda bisa menambakan pengaturan lanjutan dengan menerapkan Syntax Highlighter, agar baris kode terlihat berwarna.\u003C\/p\u003E\u003Cp\u003EBerikut artikel terkait untuk menerapkan Syntax Highlighter di Blogger:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2019\/12\/cara-memasang-syntax-highlighter.html\" target=\"_blank\"\u003ECara Memasang Syntax Highlighter Seperti Sublime Text\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-syntax-highlighter-otomatis-di-blogger.html\" target=\"_blank\"\u003EMembuat Syntax Highlighter Otomatis Terbaru di Blogger\u003C\/a\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003E5. Preview\u003C\/h3\u003E\u003Cp\u003EBagi yang masih ragu-ragu dengan tutorial ini, berikut preview demo penerapannya.\u003C\/p\u003E\u003Cdiv class=\"preview-btn codepen\"\u003E\u003Ca class=\"klik-preview\" href=\"https:\/\/codepen.io\/bungfrangki\/pen\/VwBoWJR\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003ECodePen\u003C\/a\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003EPenutup\u003C\/h2\u003E\u003Cp\u003ESejatinya cara ini tidak perlu diterapkan bilamana di awal membuat dan membangun blog telah memiliki cukup pengetahuan tentang CSS, 糖心vlog官方入口 dan JavaScript. Setidaknya dasar-dasarnya saja.\u003C\/p\u003E\u003Cp\u003EMeskipun para kreator template Blogger telah berupaya keras untuk membuat 鈥榎u003Ci\u003Eshortcut\u003C\/i\u003E鈥� pengeditan tampilan blog lewat Tata Letak (Layout), tetap saja tidak serta merta membuat kita menjadi abai untuk belajar hal-hal yang bersinggungan menyangkut CSS, 糖心vlog官方入口 dan JavaScript.\u003C\/p\u003E\u003Cp\u003EDemikian informasi tentang cara merubah tag Blockquote menjadi tag Pre Code dengan JavaScript. Meski pada penerapannya pada platform Blogger, kode JavaScript ini juga dapat dipastikan akan bekerja secara sempurna di platform atau tempat lain. Semoga mermanfaat dan selamat mencoba!\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/3744300870960958428\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/02\/merubah-blockquote-tag-menjadi-pre-code.html#comment-form","title":"1 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3744300870960958428"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3744300870960958428"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2023\/02\/merubah-blockquote-tag-menjadi-pre-code.html","title":"Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhVSG33tLmZGg8oVj_EX-kWcXiQ58Xb7n8s1T5yEY1oFBX9nmljuuWoIdqohVHO2ScJedbreNx2ax1AEOtrmkZSxE9N7eJ7st1ayfoT6XOK2X-eSFSyIaFt5wRqag8Otsuo1KLGBRNPI2p2T0C4XyCc6Tr3rnL8TGWW6os9NGQgaGoNnZu57vt6XQ8V3w\/s72-c\/change-blockquote-tag-to-pre-code-tag-with-javascript.jpg","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-3670449159604049156"},"published":{"$t":"2022-10-06T12:09:00.007+07:00"},"updated":{"$t":"2023-02-19T13:21:54.447+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru"},"content":{"type":"html","$t":"Widget blogger kali ini adalah \u003Cb\u003Ecara membuat daftar isi\/sitemap yang berlabel 鈥榥ew鈥� atau 鈥榖aru鈥� sesuai label yang mendapat artikel terbaru\u003C\/b\u003E. Widget ini untuk mempermudah menavigasi penjelajahan blog dengan melihat label dari blog tersebut.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDengan begitu para pengunjung akan mengetahui label mana saja yang baru saja mendapatkan update artikel terbaru di blog tertentu.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSeperti yang sudah saya ungkapkan sebelumnya, fungsi \u003Ca href=\"https:\/\/www.bungfrangki.com\/search\/label\/Widget?\u0026amp;max-results=5\" target=\"_blank\"\u003E#Widget\u003C\/a\u003E daftar isi ini untuk melihat semua artikel secara lengkap dan supaya mudah di temukan oleh pengunjung dan memudahka bot menjelajah juga untuk merayapi semua artikel di blog anda.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBaca juga:\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-widget-random-post-tanpa-gambar.html\" target=\"_blank\"\u003EMembuat Widget Random Post Tanpa Thumbnail di Bawah Postingan\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJadi, penggunaan sitemap atau daftar ini di blog sangatlah penting, semakin banyak blog anda di crawl\/dijelajahi, maka semakin banyak pula page views yang dihasilkan setiap harinya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"membuat sitemap atau daftar isi\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhLClYZazJwYKWqvEIHbSFBazX6odhKvxEaoXcjnfFcoC1VUcOeLpJxqbcqtCOS0KI2ZfB4loPVCaUVvh7Wkd_sDq-jBGk1ljNBDp_jI2DpxnNTohnYbG8NEbxeWSKQZKuEoRlsOEwnTdPT\/s1600\/sitemap-daftar-isi-blog.png\" title=\"membuat sitemap atau daftar isi\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003ECara Pasang Widget Daftar Isi di Blog\u003C\/h2\u003EAlangkah baiknya widget ini diletakkan pada laman statis, dengan cara masuk ke dashboard blog anda, lalu klik \u003Cb\u003ELaman\u003C\/b\u003E \u0026gt; \u003Cb\u003ELaman baru\u003C\/b\u003E. Kemudian tulis judul laman suka-suka anda, dan klik 糖心vlog官方入口, pastekan kode di bawah ini di dalamnya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre class='html'\u003E\u003Ccode\u003E\u0026lt;div class=\"sitemap-widget sitemap-tag-new sitemap\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/bungfrangki\/bloggerSitemap@main\/daftarisi.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;script src=\"https:\/\/www.bungfrangki.com\/feeds\/posts\/default?max-results=999\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=loadtoc\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003EGanti url \u003Cb\u003Ewww.bungfrangki.com\u003C\/b\u003E pada kode di atas dengan url blog Anda.\u003C\/div\u003E\u003Cbr \/\u003E\nUntuk memperbaiki tampilannya, silahkan tambahkan CSS berikut ini:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre class='css'\u003E\u003Ccode\u003E\n.sitemap{\n  display:block;\n  font-family:var(--body-font,BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)\n}\n.sitemap-widget{\n  max-height:525px;\n  overflow:auto;\n}\n.sitemap p a{\n  background-color:rgba(0,0,0,.055);\n  color:var(--accent,#0277d4);\n  font-weight:700;\n  display:block;\n  padding:5px 10px;\n  text-decoration:none;\n}\n.sitemap p a:hover{\n  background-color:var(--accent,#0277d4);\n  color:#fff;\n}\n.sitema a{\n  transition: .3s ease-in;\n}\n.sitemap ol li a {\n  text-decoration:none;\n  color:var(--link-color,#182257)\n}\n.sitemap ol li a:hover {\n  color:var(--hover-color,#0277d4)\n}\n.sitemap ol li:not(:first-child){\n  padding-top:8px;\n}\n.sitemap ol li:not(:last-child) {\n  border-bottom:1px solid rgba(0,0,0,.055);\n  padding-bottom:8px;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cbr \/\u003E\n Hasilnya silahkan lihat langsung pada link berikut:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"download klik-download jsfiddle\"\u003E\u003Ca class=\"klik-download\" href=\"https:\/\/jsfiddle.net\/bungfrangki\/43y1cp5L\/11\/\" onclick=\"this.href = 'https:\/\/jsfiddle.net\/bungfrangki\/43y1cp5L\/11\/'\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003EJSFiddle\u003C\/a\u003E \u003Ca class=\"klik-download\" href=\"https:\/\/codepen.io\/bungfrangki\/pen\/xxJozEV\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003ECodePen\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n  \u003Ch2\u003EPenutup\u003C\/h2\u003E\nDemikian cara \u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html\"\u003EMembuat Sitemap dengan Tag NEW Pada Label yang Mendapat Artikel Baru\u003C\/a\u003E, selamat mencoba."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/3670449159604049156\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html#comment-form","title":"3 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3670449159604049156"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3670449159604049156"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html","title":"Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhLClYZazJwYKWqvEIHbSFBazX6odhKvxEaoXcjnfFcoC1VUcOeLpJxqbcqtCOS0KI2ZfB4loPVCaUVvh7Wkd_sDq-jBGk1ljNBDp_jI2DpxnNTohnYbG8NEbxeWSKQZKuEoRlsOEwnTdPT\/s72-c\/sitemap-daftar-isi-blog.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-1892415603909404639"},"published":{"$t":"2022-09-08T10:19:00.013+07:00"},"updated":{"$t":"2023-02-15T07:41:37.438+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"BlogPosting"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Schema Markup"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"}],"title":{"type":"text","$t":"Schema Markup BlogPosting"},"content":{"type":"html","$t":"\u003Cp\u003EBaru-baru ini saya mengubah Schema Markup dan Structured Data blog ini dari \u003Cb\u003EArticle\u003C\/b\u003E (\u003Ci\u003Ehttps:\/\/developers.google.com\/search\/docs\/advanced\/structured-data\/article\u003C\/i\u003E) menjadi \u003Ci\u003Etype\u0026nbsp;\u003C\/i\u003E \u003Ca href=\"https:\/\/www.bungfrangki.com\/search\/label\/BlogPosting?url=https:\/\/www.bungfrangki.com\/2022\/09\/schema-markup-blogposting.html\" target=\"_blank\"\u003EBlogPosting\u003C\/a\u003E (\u003Ci\u003Ehttps:\/\/schema.org\/BlogPosting\u003C\/i\u003E), dalam format Json-LD, dengan menghapus Microdata bawaan Blogger.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi0DPFmKWvPLHJPAGY42q4KZfLVNdaFPoJXWUuMZUELvomDM3Q-nyq6hvBbEvbQJqCmmA5F17HPUO903hFi646LORT2eYsVF64kVX86NaJFs8At2Bi60s_ooQQ1vPPuxCKt_PYaOUPCkGdjKi0mMCJZ4m4OqznmBw7R8wppbQI4EzNRM8x_7wuX9yFV-Q\/s1920\/schema-blogposting-markup.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Schema Markup BlogPosting\" border=\"0\" data-original-height=\"1080\" data-original-width=\"1920\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi0DPFmKWvPLHJPAGY42q4KZfLVNdaFPoJXWUuMZUELvomDM3Q-nyq6hvBbEvbQJqCmmA5F17HPUO903hFi646LORT2eYsVF64kVX86NaJFs8At2Bi60s_ooQQ1vPPuxCKt_PYaOUPCkGdjKi0mMCJZ4m4OqznmBw7R8wppbQI4EzNRM8x_7wuX9yFV-Q\/s16000\/schema-blogposting-markup.jpg\" title=\"Schema Markup BlogPosting\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EMengapa menggunakan format JSON-LD? Karena (saat ini) itu yang direkomendasikan oleh \u003Cb\u003EGoogle Developer\u003C\/b\u003E (\u003Ci\u003Ehttps:\/\/developers.google.com\/search\/docs\/advanced\/structured-data\/intro-structured-data?hl=id\u003C\/i\u003E). Lagipula format ini yang (menurut saya) paling mudah digunakan, tidak ribet bila ingin mengganti \u003Ci\u003Etype\u003C\/i\u003E atau menambahkan atau menghilangkan item lainnya sewaktu-waktu. Dibanding dengan penerapan Microdata yang menempel pada konten 糖心vlog官方入口.\u003C\/p\u003E\u003Cp\u003EMengapa memutuskan mengganti (lagi) Schema dan Stuctured Data menjadi schema BlogPosting markup? Secara garis beasr BlogPosting markup kurang lebih sama dengan Article markup. Namun bagi saya schema BlogPosting markup lebih cocok dipasang di platform Blogger \/ blogspot dengan jenis konten seperti di bungfrangki.com ini.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ESchema BlogPosting Markup\u003C\/h2\u003E\u003Cp\u003EBerikut format JSON-LD untuk schema BlogPosting markup:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre class=\"json\"\u003E\u003Ccode class=\"ruby\"\u003E\u0026lt;script type='application\/ld+json'\u0026gt;{\u003Cbr \/\u003E\u0026nbsp; \u0026amp;quot;@context\u0026amp;quot;: \u0026amp;quot;http:\/\/schema.org\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;BlogPosting\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026amp;quot;inLanguage\u0026amp;quot;: \u0026amp;quot;id-ID\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026amp;quot;headline\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.title.escaped\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;description\u0026amp;quot;: \u0026amp;quot;\u0026lt;b:eval expr='snippet(data:post.snippets.long, { length: 250 })'\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;articleBody\u0026amp;quot;: \u0026amp;quot;\u0026lt;b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;keywords\u0026amp;quot;: \u0026amp;quot; \u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;b:if cond='not data:label.isLast'\u0026gt;, \u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u0026amp;quot;,\u0026amp;quot;datePublished\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.date.iso8601\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026amp;quot;dateModified\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.lastUpdated.iso8601\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;image\u0026amp;quot;: {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;ImageObject\u0026amp;quot;,\u0026amp;quot;url\u0026amp;quot;: \u0026amp;quot;\u0026lt;b:if cond='data:blog.postImageUrl'\u0026gt;\u0026lt;b:eval expr='resizeImage(data:blog.postImageUrl, 1200, \u0026amp;quot;1200:675\u0026amp;quot;)'\/\u0026gt;\u0026lt;b:else\/\u0026gt;https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEil3tD567IoedA3NwEVbZcM19L2F-KcKyEPxVCDTerIzTsaNitzL-BeNE-4u8NMKoL_3vblOAAjXjU5WQPLdYhHR0YJ3u2aB3CsyYaKz3fVDGHOzoZXMffVbaZBCcEU-82ViR3IgMfoz0U\/w810-c-h456\/no-thumbnail_810.png\u0026lt;\/b:if\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;height\u0026amp;quot;: 675,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;mainEntityOfPage\u0026amp;quot;: {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;WebPage\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;@id\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.url.escaped\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;name\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.title.escaped\/\u0026gt;\u0026amp;quot;\u003Cbr \/\u003E\u0026nbsp; },\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;width\u0026amp;quot;: 1200},\u0026amp;quot;publisher\u0026amp;quot;: {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;Organization\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;name\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:blog.title.escaped\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;logo\u0026amp;quot;: {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;ImageObject\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026amp;quot;url\u0026amp;quot;: \u0026amp;quot;https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiDD9EBEvSMbaRLfRXQZEvmAfPIyHHceV-LiE8BgTTlyCOemMNOY3Zw78RF7a4oKTNVIvyVcf3g6K3_NgGfxFf82IHIGGh-q1HNXKBS-uoGh7_AMSgJBvToNsZMmF8CZRuZRMG_LisahJY\/s1600\/logo.png\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026amp;quot;width\u0026amp;quot;: 600,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026amp;quot;height\u0026amp;quot;: 133\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; },\u0026lt;b:if cond='data:post.author.aboutMe or data:post.author.authorPhoto.image'\u0026gt;\u0026amp;quot;author\u0026amp;quot;: {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;@type\u0026amp;quot;: \u0026amp;quot;Person\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;name\u0026amp;quot;: \u0026amp;quot;\u0026lt;data:post.author.name\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026amp;quot;url\u0026amp;quot;: \u0026amp;quot;\u0026lt;b:if cond='data:post.author.profileUrl'\u0026gt;\u0026lt;data:post.author.profileUrl\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026amp;quot;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026nbsp; }\u003Cbr \/\u003E}\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003Cbr \/\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EMasalah articleBody\u003C\/h2\u003E\u003Cp\u003EPada \u003Cb\u003EarticleBody \u003C\/b\u003Emenggunakan\u003Ccode\u003E\u0026nbsp;\u0026lt;b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'\/\u0026gt;\u003C\/code\u003E (yang sebetulnya outputnya juga sama persis dengan \u003Ccode\u003E\u0026lt;data:post.longSnippet\/\u0026gt;\u003C\/code\u003E) alih alih menggunakan \u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E, karena ternyata outputnya dalam 糖心vlog官方入口, bukan cuma text di post body.\u003C\/p\u003E\u003Cp\u003ESehingga, bila dalam postingan mengandung unsur kode tertentu, seperti tanda petik (\") atu (') maka dianggap sebagai penutup dari elemen articleBody dalan JSON-LD itu. Hal ini akan memicu munculnya error pada Google Search Console atau \u003Ca href=\"https:\/\/www.bungfrangki.com\/search\/label\/Google%20Webmaster\" target=\"_blank\"\u003EGoogle Webmaster\u003C\/a\u003E.\u003C\/p\u003E\u003Cp\u003ESebetulnya articleBody ini outputnya mesti berisi seluruh aktualisasi paragraf di post body (dalam teks tanpa \u003Ci\u003Eline break\u003C\/i\u003E). Hanya saja hal tersebut tidak dapat diterapkan secara maksimal, karena hanya memicu terjadinya error di GSC. Solusi terbaiknya adalah, tetap menggunakan dengan format \u003Ci\u003Elong snippet\u003C\/i\u003E atau tidak menggunakannya sama sekali.\u0026nbsp;\u003C\/p\u003E\u003Cp\u003EMaka saya memilih menggunakan \u003Ci\u003Elong snippet\u003C\/i\u003E saja.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EPengujian di\u0026nbsp;Rich Results Test\u003C\/h2\u003E\u003Cp\u003EDari format Schema BlogPosting Markup di atas, maka hasil \u003Ci\u003ERich Results Test\u003C\/i\u003E\u0026nbsp;atau Pengujian Hasil Kaya akan\u0026nbsp;nampak seperti gambar berikut:\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhOXTsOixN6fonVEtt56JEyNjm_9R6Pz0e01Aj0kYQxqkOSCGFJzO1QFbvvSk1HXoTYeRUmkvV95ksD7u3zflp25Dx5O680UO_cl-ie3SB3u6PTz6mYBZkH7KwXNN1feAaSRBUbl45qVG1EPx7_s1S7xqmz9GHh7IVrEZy6JzGrb5U5QenvXGQApSmn4g\/s2111\/schema-blogposting-markup-rich-results-test.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Schema Markup BlogPosting di Google Rich Results\" border=\"0\" data-original-height=\"2111\" data-original-width=\"900\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhOXTsOixN6fonVEtt56JEyNjm_9R6Pz0e01Aj0kYQxqkOSCGFJzO1QFbvvSk1HXoTYeRUmkvV95ksD7u3zflp25Dx5O680UO_cl-ie3SB3u6PTz6mYBZkH7KwXNN1feAaSRBUbl45qVG1EPx7_s1S7xqmz9GHh7IVrEZy6JzGrb5U5QenvXGQApSmn4g\/s16000\/schema-blogposting-markup-rich-results-test.jpg\" title=\"Schema Markup BlogPosting di Google Rich Results\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch2 style=\"text-align: left;\"\u003EPenutup\u003C\/h2\u003E\u003Cp\u003EDemikian ulasan tentang Schema BlogPosting Markup kali ini, bila ada masukkan atau saran tentang ini. Mari berdiskusi lewat kolom komentar. Terima kasih sudah menyimak.\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/1892415603909404639\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2022\/09\/schema-markup-blogposting.html#comment-form","title":"3 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1892415603909404639"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1892415603909404639"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2022\/09\/schema-markup-blogposting.html","title":"Schema Markup BlogPosting"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi0DPFmKWvPLHJPAGY42q4KZfLVNdaFPoJXWUuMZUELvomDM3Q-nyq6hvBbEvbQJqCmmA5F17HPUO903hFi646LORT2eYsVF64kVX86NaJFs8At2Bi60s_ooQQ1vPPuxCKt_PYaOUPCkGdjKi0mMCJZ4m4OqznmBw7R8wppbQI4EzNRM8x_7wuX9yFV-Q\/s72-c\/schema-blogposting-markup.jpg","height":"72","width":"72"},"thr$total":{"$t":"3"}}]}});